<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="HTML格式化, js格式化, JS加密, css格式化, css压缩">
<link rel="icon" type="text/css" href="img/css.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS在线格式化,CSS代码压缩工具</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

<div class="container">
<div>

<h3>
<a href="css.html">在线CSS格式化和压缩</a>&nbsp;&nbsp;<a href="index.html">HTML/JS在线格式化</a>
</h3>
<hr>
<div class="row">
<textarea class="form-control" rows="7" id="content" placeholder="请在这里输入您需要格式化或压缩的CSS"></textarea>
</div>
<div class="row" style="margin-top:20px">
<button type="submit" class="btn btn-danger" id="btn1">
CSS格式化
</button>
<button type="submit" class="btn btn-primary" id="btn2">
CSS压缩
</button>
<button type="submit" class="btn btn-primary" id="btn3">
清空结果
</button>
</div>
<div class="row" style="margin-top:20px">
<textarea class="form-control" rows="7" id="shuchu" placeholder="结果区域"></textarea>
</div>
<hr>
<div class="item-box">
<h3>在线工具介绍</h3>
<hr>
<div class="view-box">
<p>CSS代码格式化工具可实现CSS代码格式化和CSS在线压缩。压缩CSS使得体积减小,传输速度快，格式化CSS在线转换成易编写、易读。</p>
</div>
</div>
</div>
</div>

<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.min.js"></script>
    </script>
<script type="text/javascript">
    var CSSFORMAT = {
        format: function (s) {//格式化代码
            s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
            s = s.replace(/;\s*;/g, ";"); //清除连续分号
            s = s.replace(/\,[\s\.\#\d]*{/g, "{");
            s = s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2");
            s = s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2");
            s = s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2");
            if ($("#chk").prop("checked")) {
                s = s.replace(/(\r|\n|\t)/g, "");
                s = s.replace(/(})/g, "$1\r\n");
            }
            return s;
        },
        pack: function (s) {//压缩代码
            s = s.replace(/\/\*(.|\n)*?\*\//g, ""); //删除注释
            s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
            s = s.replace(/\,[\s\.\#\d]*\{/g, "{"); //容错处理
            s = s.replace(/;\s*;/g, ";"); //清除连续分号
            s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白
            return (s == null) ? "" : s[1];
        }
    };
</script>
<script type="text/javascript">
  $("#btn1").bind("click",
  function() {
    var input = document.getElementById('content').value;
    var output = CSSFORMAT['format'](input);
    document.getElementById('shuchu').value = output;
    return false
  });
  $("#btn2").bind("click",
  function() {
    var input = document.getElementById('content').value;
    var output = CSSFORMAT['pack'](input);
    document.getElementById('shuchu').value = output;
    return false
  });
  $("#btn3").bind("click",
  function() {
    document.getElementById('content').value = '';
    document.getElementById('shuchu').value = '';
    document.getElementById('content').select();
    return false
  });
</script>

</body>
</html>